import React from 'react';
import { message } from 'antd';
import { connect } from 'react-redux';
import * as routerActions from 'react-router-redux';
import Api from 'Utils/api';
import MessageType from 'Constants/MessageType';
import { BROWSER_MODE } from 'Constants/webConstants';
import { RESOURCE_HOST } from '../../../../constants/config';
import InteractionDetail from '../../Components/InteractionDetail';
import './../DoubleRandomPage/index.scss';

class GovDetail extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      title: '历史举报详情',
      content: ''
    };

    this.getComponent = ::this.getComponent;
    this.returnHandle = ::this.returnHandle;
    this.renderMedia = ::this.renderMedia;
  }
  componentWillMount() {
    this.getComponent();
  }
  getComponent() {
    const api = new Api({
      method: 'GET',
      path: `/reports/user/${this.props.params.id}`,
      success: (json) => {
        this.setState({
          content: json
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  returnHandle() {
    this.props.dispatch(routerActions.goBack());
  }
  renderMedia(content) {
    if (content.report_type === MessageType.VIDEO) {
      return (
        <video controls preload className="video">
          <source src={`${RESOURCE_HOST}${content.video_audio}`} type="video/mp4" />
        </video>
      );
    } else if (content.report_type === MessageType.AUDIO) {
      return (
        <audio controls className="audio">
          <source src={`${RESOURCE_HOST}${content.video_audio}`} type="audio/mp3" />
        </audio>
      );
    }
    return '';
  }
  render() {
    const { title, content } = this.state;
    const { mode } = this.props;
    const isVertical = BROWSER_MODE.isVertical(mode);
    return (
      <div>
        <InteractionDetail
          title={title}
          content={
            <div className={`${isVertical ? 'v-' : ''}appoint-detail-page`}>
              <div className="item">
                {
                  content && content.title ? content.title : ''
                }
              </div>
              <div className="item">
                <span>投诉对象：</span>
                <span>
                  {
                    content && content.report_target ? content.report_target : ''
                  }
                </span>
              </div>
              <div className="item">
                投诉内容
              </div>
              <div className="item">
                {
                  content && content.content ? <span dangerouslySetInnerHTML={{ __html: content.content.replace(/\n/g, '<br/>') }} /> : ''
                }
              </div>
              <div className="audio-video-wrap">
                {
                  content && content.report_type ? this.renderMedia(content) : ''
                }
              </div>
            </div>
          }
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
    ...state.webReducer
  };
}
export default connect(mapStateToProps)(GovDetail);
